
<html>
<head>
    <title>Title</title>
    <!--引入elementui得样式-->
    <link type="text/css" rel="stylesheet" href="/css/index.css"/>
    <!--引入vue得依赖必须再elementui之前引入vue-->
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/qs.min.js"></script>

    <style>
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
        #add{
            margin: 10px 0px;

        }
    </style>
</head>
<body>
   <div id="app">
       <el-tabs :tab-position="tabPosition" v-model="activeName" @tab-click="initSection">
           <el-tab-pane :label="dept.name" v-for="dept in deptsList" :name="dept.id+''">
               <!--查询搜索-->
               <el-form :inline="true" :model="SectionVo" class="demo-form-inline">
                   <el-form-item label="科室名">
                       <el-input v-model="SectionVo.name" placeholder="请输入科室名"></el-input>
                   </el-form-item>
                   <el-form-item label="状态">
                       <el-input v-model="SectionVo.status" placeholder="请输入状态"></el-input>
                   </el-form-item>
                   <el-form-item>
                       <el-button type="primary" @click="onSubmit">查询</el-button>
                   </el-form-item>
               </el-form>
               <div id="add">
                   <el-button type="primary" @click="addSection">新增 <i class="el-icon-circle-plus-outline"></i></el-button>
               </div>
               <el-table
                       :data="sectionsList"
                       stripe
                       style="width: 100%">
                   <el-table-column
                           prop="id"
                           label="科室id">
                   </el-table-column>

                   <el-table-column
                           prop="name"
                           label="科室名称">
                   </el-table-column>
                   <el-table-column
                           prop="status"
                           label="科室状态"
                           sortable>
                       <template slot-scope="scope">
                            <el-tag type="danger" effect="dark" v-if="scope.row.status=='1'">禁用</el-tag>
                           <el-tag type="success" effect="dark" v-if="scope.row.status=='0'">启用</el-tag>
                       </template>

                   </el-table-column>

                   <el-table-column label="操作">
                       <template slot-scope="scope">
                           <el-button type="danger" @click="detailSection(scope.row)" >详情</el-button>
                           <el-button type="success" @click="editSection(scope.row)">修改</el-button>
                       </template>
                   </el-table-column>
               </el-table>

               <!--分页-->
               <el-pagination
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="[5, 10, 15, 20]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
               </el-pagination>

           </el-tab-pane>
       </el-tabs>
<!--修改科室-->
       <el-dialog
               title="修改科室的信息"
               :visible.sync="dialogVisible2"
               width="30%"
       >
           <el-form label-width="80px" :model="sectForm" ref="addFormRef">
               <el-form-item label="科室名" prop="name">
                   <el-input v-model="sectForm.name" ></el-input>
               </el-form-item>

               <el-form-item label="科室状态" prop="status">
                   <el-tooltip :content="'Switch value: ' + sectForm.status" placement="top">
                       <el-switch
                               v-model="sectForm.status"
                               active-color="#13ce66"
                               inactive-color="#ff4949"
                               active-value="0"
                               inactive-value="1">
                       </el-switch>
                   </el-tooltip>
               </el-form-item>
           </el-form>
           <span slot="footer" class="dialog-footer">
                 <el-button @click="dialogVisible2 = false">取 消</el-button>
                 <el-button type="primary" @click="confirmUpdate">确 定</el-button>
                 </span>
       </el-dialog>
<!--    添加科室-->
       <el-dialog
               title="添加科室的信息"
               :visible.sync="dialogVisible1"
               width="45%"
       >
           <!--添加页面-->
           <el-form label-width="80px" :model="addForm" ref="addFormRef">

               <el-form-item label="所在部门" prop="dept">
                   <el-select v-model="addForm.dept" placeholder="请选择所在部门" >
                       <el-option
                               v-for="item in deptsList"
                               :key="item.id"
                               :label="item.name"
                               :value="item.id">
                       </el-option>
                   </el-select>
               </el-form-item>

               <el-form-item label="科室名称" prop="name">
                   <el-input v-model="addForm.name" ></el-input>
               </el-form-item>

               <el-form-item label="科室状态" prop="status">
                   <el-tooltip :content="'Switch value: ' + value" placement="top">
                       <el-switch
                               v-model="addForm.status"
                               active-color="#13ce66"
                               inactive-color="#ff4949"
                               active-value="0"
                               inactive-value="1">
                       </el-switch>
                   </el-tooltip>
               </el-form-item>
           </el-form>
           <span slot="footer" class="dialog-footer">
                 <el-button @click="dialogVisible1 = false">取 消</el-button>
                 <el-button type="primary" @click="confirmAdd">确 定</el-button>
           </span>
       </el-dialog>
<!--       详情弹框-->
       <el-dialog
               title="添加详情的信息"
               :visible.sync="dialogVisible03"
               width="90%"
       >
           <el-form label-width="80px" :model="detailForm" ref="addFormRef">
               <el-collapse accordion>
                   <el-collapse-item>
                       <template slot="title">
                           学术地位<i class="header-icon el-icon-info"></i>
                       </template>
                       <el-input v-model="detailForm.science" ></el-input>
                   </el-collapse-item>

                   <el-collapse-item>
                       <template slot="title">
                           技术优势<i class="header-icon el-icon-info"></i>
                       </template>
                       <el-input v-model="detailForm.skill" ></el-input>
                   </el-collapse-item>

                   <el-collapse-item>
                       <template slot="title">
                           科室简介<i class="header-icon el-icon-info"></i>
                       </template>
                       <el-input v-model="detailForm.intro" ></el-input>
                   </el-collapse-item>

                   <el-collapse-item>
                       <template slot="title">
                           成果创新<i class="header-icon el-icon-info"></i>
                       </template>
                       <el-input v-model="detailForm.innovate" ></el-input>
                   </el-collapse-item>

                   <el-collapse-item>
                       <template slot="title">
                           就诊须知<i class="header-icon el-icon-info"></i>
                       </template>
                       <el-input v-model="detailForm.info" ></el-input>
                   </el-collapse-item>
               </el-collapse>


           </el-form>
           <span slot="footer" class="dialog-footer">
                 <el-button @click="dialogVisible03 = false">取 消</el-button>
                 <el-button type="primary" @click="confirmDetail">确 定</el-button>
           </span>
       </el-dialog>


   </div>
</body>
<script>
     var app=new Vue({
          el:"#app",
          data:{
              tabPosition: 'left',
              deptsList:[],
              sectionsList:[],
              sectForm:{},
              dialogVisible2:false,
              dialogVisible1:false,
              dialogVisible03:false,
              value:'',
              SectionVo:{},
              data: [],
              activeName:'1',
              currentPage:1,
              pageSize:5,
              total:0,
              addForm:{},
              detailForm:{}
          },

          created(){
             this.initDept();
             this.initSection();
          },
          methods:{


              detailSection(row){
                  this.dialogVisible03=true;
                  this.detailForm=row;
              },

              confirmDetail(){

                  axios.post("/selection/updateByPrimaryKeySelective",this.detailForm).then(result=>{
                      console.log(result)
                      if(result.data.code===200){
                          this.$message({
                              showClose: true,
                              message: '恭喜你，修改成功',
                              type: 'success'
                          });
                          this.dialogVisible03=false;
                          this.initSection();
                      }
                  });
              },

              //添加
              addSection(){
                  this.dialogVisible1=true;
                  this.addForm={}
              },
              confirmAdd(){
                  axios.post("/selection/addSection",this.addForm).then(result=>{
                      if(result.data.code===200) {
                          this.$message({
                              showClose: true,
                              message: '恭喜你，添加成功',
                              type: 'success'
                          });
                          this.dialogVisible1=false;
                          this.initSection();
                      }
                  });
              },

              //搜索框查询
              onSubmit(){
                  this.currentPage=1;
              axios.post("/selection/sectionList",this.SectionVo).then(resp=>{
                this.sectionsList=resp.data.data;
                  console.log(resp)
              })
              },

              //分页
              handleSizeChange(val) {
                  console.log(`每页 ${val} 条`);
                  this.PageSize=val;
                  this.initSection();
              },
              handleCurrentChange(val) {
                  console.log(`当前页: ${val}`);
                  this.currentPage=val
                  this.initSection();
              },

              //修改
              editSection(row){
                  this.dialogVisible2=true;
                  this.sectForm=row;
                  console.log(row)
              },
                //确认修改
              confirmUpdate(){

                  axios.post("/selection/updateSection",this.sectForm).then(result=>{
                      console.log(result)
                      if(result.data.code===200){
                          this.$message({
                              showClose: true,
                              message: '恭喜你，修改成功',
                              type: 'success'
                          });
                          this.dialogVisible2=false;
                          this.initDept();
                      }
                  });
              },

              initDept(){
                  axios.get("/dept/deptList").then(resp=>{
                      console.log(resp);
                      this.deptsList = resp.data.data;
                      console.log(this.activeName);
                  })
              },

              initSection(){
                  axios.get("/selection/queryAllSectionByDeptId?currentPage="+this.currentPage+"&pageSize="+this.pageSize+"&dept="+this.activeName).then(resp=>{
                      console.log(resp);
                        this.sectionsList=resp.data.data.list;
                        this.total=resp.data.data.total;
                  })
              }
          }
     })
</script>
</html>
